<script setup lang="ts">
import { Toast } from "vant";
import useConsultStore from "@/pinia/modules/consultStore/consultStore.ts";
import { ref, Ref } from "vue";

const consultStore = useConsultStore();

const props = defineProps<{
   orderId: string
   payment?: number
   show: boolean,
   payCallback?: string
   close?: () => void
}>();

const emits = defineEmits<{ (eventName: "update:show", show: boolean): void }>();


const paymentMethod: Ref<0 | 1> = ref<0 | 1>(0);

const handlePayOrder = async () => {
   Toast.loading("正在进行支付");
   try {
      const payUrl: string = await consultStore.fetchConsultOrderPayUrl({ paymentMethod: paymentMethod.value, orderId: props.orderId, payCallback: "http://localhost:8080/#/"+ props.payCallback });
      window.location.href = payUrl;
   } catch (error: any) {
      Toast.fail(error.message);
   }
};


</script>

<template>
   <van-action-sheet :closeable="false" title="选择支付方式" :show="show" @update:show="emits('update:show',$event)"  :before-close="close">
      <div class="pay-type">
         <p class="amount">￥{{ payment!.toFixed(2) }}</p>
         <van-cell-group>
            <van-cell title="微信支付" @click="paymentMethod = 0">
               <template #icon>
                  <svg-icon svg-name="wechat" />
               </template>
               <template #extra>
                  <van-checkbox :checked="paymentMethod === 0" />
               </template>
            </van-cell>
            <van-cell title="支付宝支付" @click="paymentMethod = 1">
               <template #icon>
                  <svg-icon svg-name="alipay" />
               </template>
               <template #extra>
                  <van-checkbox :checked="paymentMethod === 1" />
               </template>
            </van-cell>
         </van-cell-group>
         <div class="btn">
            <van-button type="primary" round block @click="handlePayOrder">立即支付</van-button>
         </div>
      </div>
   </van-action-sheet>
</template>

<style scoped lang="scss">
.pay-type {
   .amount {
      padding: 20px;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
   }

   .btn {
      padding: 15px;
   }

   .van-cell {
      align-items: center;

      .cp-icon {
         margin-right: 10px;
         font-size: 18px;
      }

      .van-checkbox :deep(.van-checkbox__icon) {
         font-size: 16px;
      }
   }
}
</style>
